import React from 'react'
import { observer, inject } from 'mobx-react'
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
import './provideImg.scss'

@inject('UserStore')
@observer
class ProvideImg extends React.Component {
  constructor(props) {
    super()
    this.state = {}
  }
  componentDidMount() {
    new Swiper('.swiper-container', {
      loop: true, //循环
      // autoplay: {
      //   //滑动后继续播放（不写官方默认暂停）
      //   disableOnInteraction: false,
      // },
      pagination: {
        //分页器
        el: '.swiper-pagination',
      },
    })
  }
  componentWillMount() {
    // clearTimeout(this.timer)
  }
  hidePop = () => {
    this.props.hideProvide()
  }

  render() {
    let { imgsArrayShow } = this.props
    return (
      <div className="provide-img-area">
        <div className="provide-img-bkg" onClick={() => this.hidePop()}></div>
        <img
          className="close-icon"
          onClick={() => this.hidePop()}
          src={require('../../static/upload/icon_tupian_guanbi.png')}
          alt=""
        />
        <div className="provide-img-main">
          <div className="swiper-container" style={{ width: '100vw' }}>
            <div className="swiper-wrapper">
              {imgsArrayShow.map((item, index) => {
                return (
                  <div className="swiper-slide" key={index}>
                    <img className="img-main" src={item} alt="上传图片预览" />
                  </div>
                )
              })}
            </div>
            <div className="swiper-pagination"></div>
          </div>
        </div>
      </div>
    )
  }
}

export default ProvideImg
